<!--附近的人-->
<template>
  <f7-page no-toolbar
          infinite
          :infinite-distance="50"
          :infinite-preloader="showPreloader"
          @infinite="loadMore"
          ptr @ptr:refresh="loadMore2"
  >

    <f7-navbar title="附近·人" back-link="Back"></f7-navbar>
    <f7-list  media-list class="test-content">

      <f7-list-item mediaItem chevron-center v-for="(item, index) in items" :key="index"
              link="/member/memberView/"
                    title="大卫david"
                    after="2km"
              subtitle="28岁"
              text="深情不及久伴，厚爱无需多言！深情不及久伴，厚爱无需多言！"
      >
        <img slot="media" src="https://cdn.framework7.io/placeholder/people-160x160-1.jpg" width="100" />
      </f7-list-item>


    </f7-list>
  </f7-page>
</template>
<script>
  import axios from 'axios'

  export default {
    data() {
      return {
        items: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20],
        allowInfinite: true,
        showPreloader: true,
        users: [],
      };
    },
    created () {
        // this.list();
    },
    methods: {
      list(){

        axios({
          url: `/test/list`,
          method: 'get',
          baseURL: 'http://192.168.0.102:8080'
        }).then(res => {
          let data = res.data
          console.info(data);
          this.users = data
        }).catch(error => {
          alert(error.response.data.error_msg)
        })

      },
      loadMore() {
        const self = this;
        if (!self.allowInfinite) return;
        self.allowInfinite = false;

        setTimeout(() => {
          if (self.items.length >= 200) {
            self.showPreloader = false;
            return;
          }

          const itemsLength = self.items.length;

          for (let i = 1; i <= 20; i += 1) {
            self.items.push(itemsLength + i);
          }

          self.allowInfinite = true;
        }, 1000);
      },
      loadMore2(event, done) {

        setTimeout(() => {
          // todo
          done();
        }, 1000);
      }
    },
  };
</script>
<style scoped>
  .test-content {
    margin: 0px;
  }
</style>
